<!--
 * @Descripttion: Descripttion
 * @Author: Lzz
 * @Date: 2025-02-15 13:13:50
 * @LastEditors: Lzz
 * @LastEditTime: 2025-02-15 13:57:54
-->
<template>
    <div class="app-container">
        <el-card class="operate-container" shadow="never">
            <i class="el-icon-tickets"></i>
            <span>横幅列表</span>
            <el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加</el-button>
        </el-card>
        <div class="table-container">
            <el-table ref="resourceTable" :data="list" style="width: 100%;" v-loading="listLoading" border>
                <el-table-column label="编号" width="100" align="center">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column label="内容" align="center">
                    <template slot-scope="scope">{{ scope.row.content }}</template>
                </el-table-column>
                <el-table-column label="状态" width="160" align="center">
                    <template slot-scope="scope">{{ scope.row.status | formatstatus }}</template>
                </el-table-column>
                <el-table-column label="操作" width="140" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="handleUpdate(scope.$index, scope.row)">
                            编辑
                        </el-button>
                        <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper" :current-page.sync="listQuery.pageNum"
                :page-size="listQuery.pageSize" :page-sizes="[10, 15, 20]" :total="total">
            </el-pagination>
        </div>
        <el-dialog :title="isEdit ? '编辑横幅' : '添加横幅'" :visible.sync="dialogVisible" width="40%">
            <el-form :model="resource" ref="resourceForm" label-width="150px" size="small">
                <el-form-item label="横幅名称：">
                    <el-input v-model="resource.content" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="启用状态">
                    <el-select v-model="resource.status" placeholder="全部" clearable style="width: 250px">
                        <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { fetchList, createBanner, updateBanner, deleteBanner } from '@/api/banner';
import { formatDate } from '@/utils/date';

const defaultListQuery = {
    pageNum: 1,
    pageSize: 10,
    resourceName: null,
    resourceUrl: null,
    resourceCategoryId: null
};
const defaultResource = {
    id: null,
    name: null,
    url: null,
    categoryId: null,
    description: ''
};
export default {
    name: 'resourceList',
    data() {
        return {
            listQuery: Object.assign({}, defaultListQuery),
            list: null,
            total: null,
            listLoading: false,
            dialogVisible: false,
            resource: Object.assign({}, defaultResource),
            isEdit: false,
            categoryOptions: [{
                label: '启用',
                value: 1
            }, {
                label: '停用',
                value: 0
            }],
            defaultCategoryId: null
        }
    },
    created() {
        this.getList();
    },
    filters: {
        formatDateTime(time) {
            if (time == null || time === '') {
                return 'N/A';
            }
            let date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
        },
        formatstatus(value) {
            if (value == 1) {
                return '启用'
            } else {
                return '停用'
            }
        }
    },
    methods: {
        handleResetSearch() {
            this.listQuery = Object.assign({}, defaultListQuery);
        },
        handleSearchList() {
            this.listQuery.pageNum = 1;
            this.getList();
        },
        handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
        },
        handleAdd() {
            this.dialogVisible = true;
            this.isEdit = false;
            this.resource = Object.assign({}, defaultResource);
            this.resource.categoryId = this.defaultCategoryId;
        },
        handleDelete(index, row) {
            this.$confirm('是否要删除该横幅?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteBanner(row.id).then(response => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getList();
                });
            });
        },
        handleUpdate(index, row) {
            this.dialogVisible = true;
            this.isEdit = true;
            this.resource = Object.assign({}, row);
            delete this.resource.createTime
            delete this.resource.createBy
            delete this.resource.updateTime
            delete this.resource.updateBy
        },
        handleDialogConfirm() {
            this.$confirm('是否要确认?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if (this.isEdit) {
                    updateBanner(this.resource.id, this.resource).then(response => {
                        this.$message({
                            message: '修改成功！',
                            type: 'success'
                        });
                        this.dialogVisible = false;
                        this.getList();
                    })
                } else {
                    createBanner(this.resource).then(response => {
                        this.$message({
                            message: '添加成功！',
                            type: 'success'
                        });
                        this.dialogVisible = false;
                        this.getList();
                    })
                }
            })
        },
        handleShowCategory() {
            this.$router.push({ path: '/ums/resourceCategory' })
        },
        getList() {
            this.listLoading = true;
            fetchList(this.listQuery).then(response => {
                this.listLoading = false;
                this.list = response.data.list;
                this.total = response.data.total;
            });
        },
    }
}
</script>
<style></style>